<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="page-wrapper" style="align-items: center;justify-content: center;display: flex;" v-if="isLoading">
        <span style="font-size: x-large;color: white;">加载中,请稍后....</span>
    </div>
    <div class="page-wrapper" v-else>
        <div class="info">
            <div class="container">
                <div style="margin-left: 3%; margin-top: -3%;">
                    <div>
                        <v-avatar size="125" style="background-color: white">
                            <v-img :src="data.personalBlogInfo.profile" cover
                                v-if="data.personalBlogInfo.profile !== ''"></v-img>
                            <v-icon v-else icon="mdi-account-circle" size="151"></v-icon>
                        </v-avatar>
                    </div>
                </div>
                <div style="margin-left: 1%;margin-top: 1%;width: 80%;">
                    <span style="font-size: large;">{{ useUserStore().name }}</span>
                    <div style="display: flex;align-items: baseline;">
                        <span class="data" style="margin-left: 0%;">{{ data.personalBlogInfo.totalBrowse }}</span>
                        <span class="title">总访问量</span>
                        <v-divider vertical />
                        <span class="data">{{ data.personalBlogInfo.blogNumber }}</span>
                        <span class="title">博客数</span>
                        <v-divider vertical />
                        <span class="data">{{ data.personalBlogInfo.totalLike }}</span>
                        <span class="title">点赞数</span>
                    </div>
                    <div class="subtitle">
                        IP 属地: {{ data.province }} {{ data.city }}
                    </div>
                    <div class="subtitle" v-if="data.personalBlogInfo.specialty !== ''">
                        爱好/特长: {{ data.personalBlogInfo.specialty }}
                    </div>
                    <div class="subtitle" v-if="data.personalBlogInfo.signature !== ''">
                        个性签名:{{ data.personalBlogInfo.signature }}
                    </div>
                </div>
                <div style="width: 20%;height: 100%;display: flex;align-items: end;justify-content: end;"
                    v-if="!uid || Number.parseInt(uid) == useUserStore().userId">
                    <v-btn variant="plain" color="blue" @click="router.push('/blog/write')">
                        <span style="color: #2196F3;font-size: large;">发布博客</span>
                        <v-icon icon="mdi-chevron-right" size="32" color="blue"></v-icon>
                    </v-btn>
                </div>
            </div>
        </div>
        <div class="blog-wrapper" style="display: flex;" v-if="!uid || Number.parseInt(uid) == useUserStore().userId">
            <div class="left-container">
                <span style="font-size: large;font-weight: bold;margin-left: 4%;">我的博客:</span>
                <div style="height: 5px;"><v-divider></v-divider></div>
                <div v-if="data.selfBlogPreview.length === 0"
                    style="height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: center;user-select: none;">
                    <span style="font-size: small; color: gray;">还未发布过博客哦</span>
                    <div style="height: 10%;"></div>
                    <span style="color: #2196F3;font-size: large;text-decoration: underline;cursor: pointer;"
                        @click="router.push('/blog/write')">立即发布</span>
                </div>
                <div v-else style="overflow: hidden; text-overflow: ellipsis; width: 100%;">
                    <blog-item v-for="(blogPreview, index) in data.selfBlogPreview" :key="index" :blog="blogPreview" />
                </div>
            </div>
            <div style="width: 2%;"></div>
            <div class="right-container">
                <span style="font-size: large;font-weight: bold;margin-left: 2.5%;">最新发布:</span>
                <div style="height: 5px;"><v-divider></v-divider></div>
                <div style="display: flex;align-items: center;justify-content: center;height: 60vh;" v-if=blogLoading>
                    <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
                </div>
                <div class="blog-item" v-else>
                    <v-list density="comfortable">
                        <blog-item v-for="(blogPreview, index) in data.latestBlogPreview" :key="index"
                            :blog="blogPreview" />
                    </v-list>
                </div>
                <v-pagination :length="data.blogPage" v-model="page" :disabled="blogLoading"
                    @update:model-value="(page) => { updateBlogPreview(page) }"></v-pagination>
            </div>
        </div>
        <div v-else class="container" style="padding-top: 0.5%;display: block;margin-left: 10%;margin-top: 1%;">
            <span style="font-size: large;font-weight: bold;margin-left: 1%;">TA的博客:</span>
            <div style="height: 5px;"><v-divider></v-divider></div>
            <v-list density="comfortable">
                <blog-item v-for="(blogPreview, index) in data.selfBlogPreview" :key="index" :blog="blogPreview" />
            </v-list>
        </div>
    </div>
</template>

<script setup lang="ts">
import { GetLocation } from '@/controllers/gaodeController';
import type { BlogParams, BlogPreview, PersonalBlogInfo } from '@/models/blog';
import router from '@/router';
import { useUserStore } from '@/stores';
import { message } from '@/utils/message';
import { onMounted } from 'vue';
import { reactive } from 'vue';
import BlogItem from '@/components/item/BlogItem.vue';
import { GetPersonalBlogInfo, GetPersonalBlog, SearchBlog } from '@/controllers/blogController';
import { ref } from 'vue';
let uid = new URLSearchParams(window.location.search).get('uid')
let isLoading = ref(true)
let blogLoading = ref(false)
let data = reactive({
    province: '',
    city: '',
    personalBlogInfo: {} as PersonalBlogInfo,
    selfBlogPreview: [] as BlogPreview[],
    latestBlogPreview: [] as BlogPreview[],
    blogPage: 1
})

let params: BlogParams = {
    pageSize: 10,
    page: 1,
    includeSelf: false
}

let page = ref(1)
onMounted(() => {
    init()
    console.log(useUserStore().userId)
})
async function init() {
    const id = uid ? Number.parseInt(uid) : undefined
    try {
        //获取ip属地
        let location = await GetLocation()
        data.province = location.province
        data.city = location.city
        //获取个人博客介绍
        data.personalBlogInfo = await GetPersonalBlogInfo(id)
        //获取我的博客信息
        data.selfBlogPreview = await GetPersonalBlog(id)
        //获取他人写的博客
        const result = await SearchBlog(params)
        data.latestBlogPreview = result.preview
        data.blogPage = result.total
    } catch (error: any) {
        message(error.message, 'error')
    }
    finally {
        isLoading.value = false
    }
}

async function updateBlogPreview(page: number) {
    try {
        blogLoading.value = true
        params.page = page
        data.latestBlogPreview = (await SearchBlog(params)).preview
    }
    catch (error: any) {
        message(error.message, 'error')
    }
    finally {
        blogLoading.value = false
    }
}
</script>
<style scoped>
.page-wrapper {
    min-height: 100%;
    width: 100%;
    background-image: url("/star-bg.gif");
    background-repeat: repeat;
    background-size: auto;
    z-index: -1;
}

.info {
    height: 20%;
    display: flex;
    justify-content: center;
    padding-top: 5%;
}

.blog-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 1%;
}

.container {
    width: 80%;
    background-color: white;
    border-radius: 10px;
    display: flex;
}

.left-container {
    width: 26%;
    display: block;
    background-color: white;
    border-radius: 10px;
    height: fit-content;
    overflow: scroll;
    padding-top: 0.5%;
    max-height: 80vh;
}

.right-container {
    width: 52%;
    padding-top: 0.5%;
    display: block;
    background-color: white;
    border-radius: 10px;
    height: fit-content;
    /* 设置容器的高度，可以根据实际需要调整 */
    overflow-y: auto;
    /* 添加垂直滚动条 */
}

.data {
    font-size: x-large;
    font-weight: 600;
    margin-left: 1%;
}

.title {
    margin-left: 1%;
    margin-right: 1%;
}

.subtitle {
    color: rgb(64, 64, 64);
    font-size: small;
    margin-bottom: 0.1%;
}

.blog-item {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
</style>